<template>
  <a-card :body-style="{padding: '24px 32px'}"
          :bordered="false">
    <a-form @submit="handleSubmit"
            :form="form">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="编码"
                       :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                       :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-input name="code"
                     v-decorator="[
            'code',
            {rules: [{ required: true, message: '请输入编码' }]}
          ]"
                     placeholder="请输入编码" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="名称"
                       :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                       :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-input name="name"
                     v-decorator="[
            'name',
            {rules: [{ required: true, message: '请输入名称' }]}
          ]"
                     placeholder="请输入名称" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="型号"
                       :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                       :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-input name="type"
                     v-decorator="[
            'type',
            {rules: [{ required: true, message: '请输入型号' }]}
          ]"
                     placeholder="请输入型号" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="购置单位"
                       :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                       :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-input placeholder="给目标起个名字" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="购置时间"
                       :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                       :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-date-picker name="buildTime"
                           style="width: 100%"
                           v-decorator="[
            'buildTime',
            {rules: [{ required: true, message: '请选择购置时间' }]}
          ]" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="使用单位"
                       :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                       :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-input placeholder="请选择使用单位" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="是否租赁"
                       :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                       :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-select placeholder="请选择"
                      v-decorator="[
              'task.manager',
              {rules: [{ required: true, message: '请选择'}]}
            ]">
              <a-select-option value="1">AA</a-select-option>
              <a-select-option value="2">B</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="最大出力"
                       :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                       :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-input placeholder="请输入最大出力" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="保管人"
                       :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                       :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-input placeholder="请输入保管人" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="备注"
                       :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                       :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-input placeholder="请输入备注" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="使用说明书"
                       :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                       :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <div class="clearfix">
              <a-upload :file-list="fileList"
                        :remove="handleRemove"
                        :before-upload="beforeUpload">
                <a-button>
                  <a-icon type="upload" /> 选择文件</a-button>
              </a-upload>
              <!-- <a-button type="primary"
                        :disabled="fileList.length === 0"
                        :loading="uploading"
                        style="margin-top: 16px"
                        @click="handleUpload">
                {{ uploading ? '上传中' : '开始上传' }}
              </a-button> -->
            </div>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="合格证书"
                       :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                       :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <div class="clearfix">
              <a-upload :file-list="fileList"
                        :remove="handleRemove"
                        :before-upload="beforeUpload">
                <a-button>
                  <a-icon type="upload" /> 选择文件</a-button>
              </a-upload>
              <!-- <a-button type="primary"
                        :disabled="fileList.length === 0"
                        :loading="uploading"
                        style="margin-top: 16px"
                        @click="handleUpload">
                {{ uploading ? '上传中' : '开始上传' }}
              </a-button> -->
            </div>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="操作规范"
                       :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                       :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <div class="clearfix">
              <a-upload :file-list="fileList"
                        :remove="handleRemove"
                        :before-upload="beforeUpload">
                <a-button>
                  <a-icon type="upload" /> 选择文件</a-button>
              </a-upload>
              <!-- <a-button type="primary"
                        :disabled="fileList.length === 0"
                        :loading="uploading"
                        style="margin-top: 16px"
                        @click="handleUpload">
                {{ uploading ? '上传中' : '开始上传' }}
              </a-button> -->
            </div>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :wrapperCol="{ span: 24 }"
                       style="text-align: center">
            <a-button htmlType="submit"
                      type="primary">保存</a-button>
            <!-- <a-button style="margin-left: 8px">保存</a-button> -->
          </a-form-item>
        </a-col>
        <!-- <a-form-item label="起止日期"
                     :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                     :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
          <a-range-picker name="buildTime"
                          style="width: 100%"
                          v-decorator="[
            'buildTime',
            {rules: [{ required: true, message: '请选择起止日期' }]}
          ]" />
        </a-form-item>
        <a-form-item label="目标描述"
                     :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                     :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
          <a-textarea rows="4"
                      placeholder="请输入你阶段性工作目标"
                      v-decorator="[
            'description',
            {rules: [{ required: true, message: '请输入目标描述' }]}
          ]" />
        </a-form-item>
        <a-form-item label="衡量标准"
                     :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                     :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
          <a-textarea rows="4"
                      placeholder="请输入衡量标准"
                      v-decorator="[
            'type',
            {rules: [{ required: true, message: '请输入衡量标准' }]}
          ]" />
        </a-form-item>
        <a-form-item label="客户"
                     :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                     :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
          <a-input placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"
                   v-decorator="[
            'customer',
            {rules: [{ required: true, message: '请描述你服务的客户' }]}
          ]" />
        </a-form-item>
        <a-form-item label="邀评人"
                     :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                     :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
                     :required="false">
          <a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人" />
        </a-form-item>
        <a-form-item label="权重"
                     :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                     :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
                     :required="false">
          <a-input-number :min="0"
                          :max="100" />
          <span> %</span>
        </a-form-item>
        <a-form-item label="目标公开"
                     :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                     :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
                     :required="false"
                     help="客户、邀评人默认被分享">
          <a-radio-group v-model="value">
            <a-radio :value="1">公开</a-radio>
            <a-radio :value="2">部分公开</a-radio>
            <a-radio :value="3">不公开</a-radio>
          </a-radio-group>
          <a-form-item>
            <a-select mode="multiple"
                      v-if="value === 2">
              <a-select-option value="4">同事一</a-select-option>
              <a-select-option value="5">同事二</a-select-option>
              <a-select-option value="6">同事三</a-select-option>
            </a-select>
          </a-form-item>
        </a-form-item>
         
        <a-form-item :wrapperCol="{ span: 24 }"
                     style="text-align: center">
          <a-button htmlType="submit"
                    type="primary">提交</a-button>
          <a-button style="margin-left: 8px">保存</a-button>
        </a-form-item>-->
      </a-row>
    </a-form>
  </a-card>
</template>

<script>
export default {
  name: 'BaseForm',
  data () {
    return {
      description: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
      value: 1,
      fileList: [],
      uploading: false,
      // form
      form: this.$form.createForm(this),

    }
  },
  methods: {
    handleRemove (file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload (file) {
      this.fileList = [...this.fileList, file];
      return false;
    },
    handleUpload () {

    },
    // handler
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          // eslint-disable-next-line no-console
          console.log('Received values of form: ', values)
        }
      })
    }
  }
}
</script>